import React from "react";
import { getProductById } from "../../../../lib/data";

export const revalidate = 300;

export default function ProductPage({ params }: { params: { locale: string; id: string } }) {
  const { locale, id } = params;
  const t = {
    notFound: locale === "en" ? "Product Not Found" : "产品未找到",
    back: locale === "en" ? "Back" : "返回首页",
    home: locale === "en" ? "Home" : "首页",
    addToCart: locale === "en" ? "Add to cart" : "加入购物车",
  } as const;
  const data = getProductById(id, locale);
  if (!data) {
    return (
      <div className="mx-auto max-w-screen-md px-4 py-12">
        <h1 className="text-2xl font-semibold">{t.notFound}</h1>
        <a className="mt-6 inline-block text-blue-600" href={`/${locale}`}>{t.back}</a>
      </div>
    );
  }
  const { product, floor } = data;
  return (
    <div className="mx-auto max-w-screen-md px-4 py-8">
      <div className="text-sm text-gray-600 mb-4">
        <a href={`/${locale}`}>{t.home}</a> / <a href={`/${locale}/channel/${floor.id.replace(/^floor-/, '')}`}>{floor.title}</a> / <span>{product.name}</span>
      </div>
      <div className="grid md:grid-cols-2 gap-6">
        <img src={product.image} alt={product.name} className="w-full object-cover rounded-lg aspect-square bg-white" />
        <div className="space-y-4">
          <h1 className="text-2xl font-semibold">{product.name}</h1>
          {product.description && <p className="text-gray-600">{product.description}</p>}
          {product.price != null && <div className="text-rose-600 text-xl font-semibold">¥{product.price}</div>}
          <div className="pt-4">
            <button className="px-5 py-2.5 rounded bg-black text-white">{t.addToCart}</button>
          </div>
        </div>
      </div>
    </div>
  );
}